<template>
  <div class="main">
    <!--    顶部导航条-->
    <navheader></navheader>
    <div class="user_main container-fluid">
      <!--中间主体内容-->
      <div class="top_main">
        <!--      上面部分-->
        <!--      图片背景部分-->
        <div class="row block m-5" >
          <!--        头像-->
          <div class="user_img" @click="dialogVisible2 = true">
            <el-avatar :size="160" style="margin-top: -40px;background-color:white;padding: 6px;border-color: #939aa2;">
              <el-avatar :size="150" :src="this.show_user_img">
              </el-avatar>
            </el-avatar>
            <div class="pl-4">
              <a href="#" style="z-index: auto;color:#5b5b5b;font-weight: bold;position:relative">
              点击头像可修改~
              </a>
            </div>
          </div>


          <el-dialog title="上传头像"
                     @close="handleClose"
                     :visible.sync="dialogVisible2"
                     width="35%">
            <el-form :model="form" :before-close="closeDiv">
              <el-form-item :label-width="formLabelWidth" ref="uploadElement">
                <el-upload ref="upload"
                           name="upload"
                           action="#"
                           drag
                           :file-list="fileList"
                           list-type="picture"
                           :limit="1"
                           :on-remove="handleRemove"
                           :on-exceed="handleExceed"
                           :auto-upload="false"
                           :http-request="upload"
                           :on-change="imgChange">
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过2MB</div>
                </el-upload>
<!--                <el-dialog :visible.sync="dialogVisible">-->
<!--                  <img width="100%"-->
<!--                       :src="dialogImageUrl"-->
<!--                        alt="">-->
<!--                </el-dialog>-->
              </el-form-item>
              <el-form-item class="ml-5" style="padding-left: 50px">
                <el-button size="large" type="primary" @click="uploadFile">立即上传</el-button>
                <el-button size="large" @click="tocancel">取消</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>


          <!--        个人信息-->
          <div class="pl-3 pt-4">
            <h1>{{this.user_info.user_name}}</h1>
            <div class="row mt-3 ml-2">
              <div class="infoclassfont">{{this.user_info.sex}}</div>
              <div class="ml-2" style="background-color:#3f7e74;width: 3px;height: 28px"></div>
              <div class="infoclassfont pl-2">{{this.user_info.city}}</div>
              <div class="ml-2" style="background-color:#3f7e74;width: 3px;height: 28px"></div>
              <div class="infoclassfont pl-2">{{this.user_info.email}}</div>
              <div class="ml-2" style="background-color:#3f7e74;width: 3px;height: 28px"></div>
              <div class="infoclassfont pl-2">{{this.user_info.birthday}}</div>
              <div class="ml-2" style="background-color:#3f7e74;width: 3px;height: 28px"></div>
              <div class="infoclassfont pl-2" v-if="this.user_info.identity==0">学生</div>
              <div class="infoclassfont pl-2" v-if="this.user_info.identity==1">已毕业的学长学姐</div>
              <div class="infoclassfont pl-2" v-if="this.user_info.identity==2">老师</div>
              <div class="ml-2" style="background-color:#3f7e74;width: 3px;height: 28px"></div>
            </div>
            <div class="infoclassfont pt-3 pl-2">个人介绍：{{this.user_info.profile}}</div>

          </div>
        </div>
        <!--      面包屑-->
        <div class="col-md-5 col-sm-5" style="margin-top:-10px;margin-left: 1200px">
          <div class="row">
            <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 22px;color: #6b6e71;">
              <el-breadcrumb-item :to="{ path: '/Personal/Person_Note' }">返回我的主页</el-breadcrumb-item>
              <el-breadcrumb-item></el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>
      </div>
      <!--    下面部分-->
      <div class="row bottom_main mt-3 ml-1 mr-1">
        <div class="col-md-4 mt-4">
          <el-row class="tac">
            <el-col :span="15">
              <el-menu
                  router
                  style="background-color:rgba(255,255,255,0);"
                  :default-active="$route.path"
                  class="el-menu-vertical-demo">

                  <el-menu-item index="/Personal_Info/Person_Basic" >
                    <i class="el-icon-location"></i>
                    <span slot="title" class="fontClass">个人基本信息</span>
                  </el-menu-item>

                  <el-menu-item index="/Personal_Info/Person_Identity">
                    <i class="el-icon-setting"></i>
                    <span slot="title" class="fontClass">身份验证信息</span>
                  </el-menu-item>

                  <el-menu-item index="/Personal_Info/Person_Account">
                    <i class="el-icon-menu"></i>
                    <span slot="title" class="fontClass">账号信息</span>
                  </el-menu-item>

              </el-menu>
            </el-col>
          </el-row>
        </div>
        <div class="col-md-8 mt-5 mb-5" style="margin-left: -150px">
          <router-view></router-view>
        </div>
      </div>
    </div>
    <!--    底部导航条-->
    <myfooter></myfooter>
  </div>
</template>

<script>
import myfooter from '../../myfooter'
import navheader from '../../navheader'
import {getUser_Basic} from "@/api/User";

export default {
  name: "personal_info",
  components: {
    myfooter,
    navheader
  },
  data() {
    return {
      //文件头像上传相关
      hideUpload: false,
      fileList:[],
      file:[],
      dialogImageUrl: '',
      dialogVisible: false,//图片预览弹窗
      formLabelWidth: '80px',
      form: {},
      dialogVisible2: false,//弹窗

      user_info:{
        user_name:'',
        birthday:'',
        city:'',
        email:'',
        hobby:'',
        profile:'',
        sex:'',
        credit:'',
        identity:'',
        cnt_attention:0,
        cnt_fans:0,
        cnt_post_comment:0,
        img:'',

      },
      show_user_img:'',

    };
  },
  methods: {
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      this.fileList = [];  //将列表清空
      fileList=[];
      fileList.length=0;
      this.$refs.upload.clearFiles();
    },
    imgChange (file,fileList) {

      this.fileList = fileList;
      var img_type = file.name.substring(file.name.lastIndexOf('.') + 1)
      var imgSize = file.size;
      var img_maxsize = 1024 * 1024 * 2;

      // console.log(img_type == 'jpg');

      if ((img_type != 'jpg') && (img_type != 'png') && (img_type != 'JPG') && (img_type != 'JPEG') && (img_type != 'jpeg')) {
        this.fileList = [];  //将列表清空
        this.$message.warning('上传头像图片只能是JPG或PNG或JPEG格式!');
        return false;
      }

      if (imgSize>img_maxsize) {
        this.fileList = [];  //将列表清空
        this.$message.warning('上传头像图片大小不能超过 2MB!');
        return false;
      }

      return true;
      //this.$refs.uploadElement.clearValidate();

    },
    upload(file) {
      // this.formData.append('file', file.file)
      // console.log('222', this.formData)
    },
    //文件超出个数限制时的钩子
    handleExceed (file, fileList) {
      this.$msg.warning('只能上传一张图片！');
    },
    //关闭弹窗
    tocancel () {
      this.dialogVisible2 = false;
      this.fileList = [];  //将列表清空
      this.fileList.length = 0;
      this.$refs.upload.clearFiles();
    },
    handleClose() {
      this.fileList = [];  //将列表清空
      this.fileList.length = 0;
      this.$refs.upload.clearFiles();
    },
    closeDiv(){
      this.fileList = [];  //将列表清空
      this.fileList.length = 0;
      this.$refs.upload.clearFiles();
    },
    //上传按钮  修改头像
    async uploadFile () {

      if(this.fileList.length==0){
        this.$msg.error('请选择图片！');
        return false;
      }

      let formData = new FormData();
      formData.append('user_token', window.sessionStorage.getItem('token'));
      formData.append('user_img', this.fileList[0].raw);

      this.$ajax({
        url: "/api/file/uploadUserImg",
        method: "post",
        dataType:'text',
        cache:  false , //上传文件无需缓存
        processData:  false , //用于对data参数进行序列化处理 这里必须false
        contentType:  false ,  //
        data: formData
      }).then((result)=>{
        if (result.data.code == 1) {
          this.$message.success('上传成功!');
          this.dialogVisible2 = false;
          this.$refs.upload.clearFiles();
          this.init();
        }
        else {
          this.$msg.error('上传失败！');
        }
      });


    },
    // 获取当前用户个人信息
    init(){

      getUser_Basic({
        // token:window.sessionStorage.getItem('token')
      }).then(res=>{
          this.user_info.user_id = res.data.user_id;
          this.user_info.user_name = res.data.username;
          this.user_info.birthday = res.data.birthday;
          this.user_info.city = res.data.city;
          this.user_info.email = res.data.email;
          this.user_info.hobby = res.data.hobby;
          this.user_info.profile = res.data.profile;
          this.user_info.sex = res.data.sex;
          this.user_info.credit = res.data.credit;
          this.user_info.img = res.data.img;
          this.show_user_img = '/api/storage/user_img/' + this.user_info.img;

          this.user_info.identity = res.data.identity;
          this.user_info.cnt_attention = res.data.cnt_attention;
          this.user_info.cnt_fans = res.data.cnt_fans;
          this.user_info.cnt_post_comment = res.data.cnt_post_comment;
      });

    },

  },
  created() {
    let _this = this;
    _this.init();
    //
    // if(this.$router.history.current.path !='/Personal_Info/Person_Basic')
    // {
    //   this.$router.push({path:'/Personal_Info/Person_Basic'})
    // }
  },
}
</script>

<style scoped>
.main {
  background: url('~@/assets/user/personal_back.jpeg') no-repeat center;
  background-size:cover;
  width: 100%;
  background-attachment:fixed;
}

.user_main{
  width: 90%;
  height: 1100px;
  /*line-height: 100px;*/
  /*text-align:center;*/
}
/*上面部分盒子*/
.top_main{
  /*width: 80%;*/
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  height: 260px;
  background-color:rgba(255,255,255,0.85);
  align-items: center;
  margin-top: 150px;
}
/*下面部分盒子*/
.bottom_main {
  border-radius: 5px;
  background-color:rgba(255,255,255,0.85);
}

.form-group label{
  font-size: 17px;
}
/*选项卡的字体*/
.fontClass{
  font-size:20px;
  font-family: Microsoft Yahei;
  text-decoration: none;
}
.infoclassfont{
  font-size: 20px;
  color: #5b5b5b;
}
/*头像上传样式*/
/*.el-avatar:hover{*/
/*  background-color:rgba(255,255,255,0.85);*/
/*}*/
</style>
